/**
 * Created by OuKyou on 2017/3/21.
 */
function canvasLoadData() {
    var chartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            type: 'line',
            label: 'Dataset 1',
            borderColor: window.chartColors.blue,
            borderWidth: 2,
            fill: false,
            data: [
                randomFactor(100),
                randomFactor(100),
                randomFactor(100),
                randomFactor(100),
                randomFactor(100),
                randomFactor(100),
                randomFactor(100)
            ]
        }, {
            type: 'bar',
            label: 'Dataset 2',
            backgroundColor: window.chartColors.red,
            data: [
                randomFactor(100),
                randomFactor(100),
                randomFactor(100),
                randomFactor(100),
                randomFactor(100),
                randomFactor(100),
                randomFactor(100)
            ],
            borderColor: 'white',
            borderWidth: 2
        }, {
            type: 'bar',
            label: 'Dataset 3',
            backgroundColor: window.chartColors.green,
            data: [
                randomFactor(100),
                randomFactor(100),
                randomFactor(100),
                randomFactor(100),
                randomFactor(100),
                randomFactor(100),
                randomFactor(100)
            ]
        }]

    };
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myMixedChart = new Chart(ctx, {
        type: 'bar',
        data: chartData,
        options: {
            responsive: true,
            title: {
                display: true,
                text: 'Chart.js Combo Bar Line Chart'
            },
            tooltips: {
                mode: 'index',
                intersect: true
            }
        }
    });

    document.getElementById('randomizeData').addEventListener('click', function () {
        chartData.datasets.forEach(function (dataset) {
            dataset.data = dataset.data.map(function () {
                return randomFactor(100);
            });
        });
        window.myMixedChart.update();
    });
}